<!-- 工序维度统计 -->
<template>
  <div class="iBox">
    <table>
      <thead>
        <tr>
          <td>工序</td>
          <td>电量(KWH)</td>
          <td>柴油(L)</td>
          <td>天然气(m³)</td>
          <td>CO2(m³)</td>
          <td>O2(m³)</td>
          <td>压缩空气量(m³)</td>
          <td>车间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <template v-for="(list, group) in state.source">
          <tr v-for="(item, i) in list">
            <td>{{ item.flow }}</td>
            <td>{{ item.power || "-" }}</td>
            <td>{{ item.oil || "-" }}</td>
            <td>{{ item.gas || "-" }}</td>
            <td>{{ item.co2 || "-" }}</td>
            <td>{{ item.o2 || "-" }}</td>
            <td>{{ item.air || "-" }}</td>
            <td v-if="i === 0" :rowspan="list.length">{{ group }}</td>
            <td><a @click="() => openFlow(item.flow)">查看</a></td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import { getCurrentInstance, reactive, ref, watch } from "vue";
import { getValueByLabel } from "@/utils/shipflow/works.js";
import _ from "lodash";
import { exportExcel, setCellStyle } from "@/utils/exportExcel";

const { proxy } = getCurrentInstance();
const props = defineProps(["repair"]);
const emits = defineEmits(["onFlowChange"]);

const state = reactive({
  source: [],
});

watch(
  () => props.repair,
  (repair) => {
    if (repair) {
      proxy.$axios
        .get("/workflow/stat/third", { params: { repairId: repair.repairId } })
        .then(({ success, data }) => {
          if (success) {
            const source = _.map(data, (o) => ({
              flow: o.workflow,
              power: o.power?.toFixed(4),
              oil: o.oil?.toFixed(4),
              gas: o.gas?.toFixed(4),
              co2: o.co2?.toFixed(4),
              o2: o.o2?.toFixed(4),
              air: o.air?.toFixed(4),
              room: o.room,
            }));
            state.source = _.groupBy(source, "room");
          }
        });

      // const data = [
      //   {
      //     flow: "船体下料",
      //     power: 10506,
      //     oil: null,
      //     gas: 393,
      //     co2: 154,
      //     o2: 541,
      //     air: 251,
      //     room: "船体车间",
      //   },
      //   {
      //     flow: "船体割旧",
      //     power: 137940,
      //     oil: null,
      //     gas: null,
      //     co2: null,
      //     o2: null,
      //     air: 22449,
      //     room: "船体车间",
      //   },
      //   {
      //     flow: "船体焊接",
      //     power: null,
      //     oil: 9333,
      //     gas: null,
      //     co2: null,
      //     o2: null,
      //     air: null,
      //     room: "船体车间",
      //   },
      //   {
      //     flow: "舱室及船壳喷漆",
      //     power: null,
      //     oil: 9333,
      //     gas: null,
      //     co2: null,
      //     o2: null,
      //     air: null,
      //     room: "特涂车间",
      //   },
      //   {
      //     flow: "喷漆房分段喷漆",
      //     power: null,
      //     oil: 9333,
      //     gas: null,
      //     co2: null,
      //     o2: null,
      //     air: null,
      //     room: "特涂车间",
      //   },
      //   {
      //     flow: "拖轮油耗",
      //     power: null,
      //     oil: 9333,
      //     gas: null,
      //     co2: null,
      //     o2: null,
      //     air: null,
      //     room: "船舶车间",
      //   },
      // ];
      // state.source = _.groupBy(data, "room");
    }
  },
  { immediate: true, deep: true }
);

const openFlow = (flowLabel) => {
  const flow = getValueByLabel(flowLabel);
  emits("onFlowChange", flow);
};

const wordIndex = [
  "A",
  "B",
  "C",
  "D",
  "E",
  "F",
  "G",
  "H",
  "I",
  "J",
  "K",
  "L",
  "M",
  "N",
  "O",
  "P",
  "Q",
  "R",
  "S",
  "T",
  "U",
  "V",
  "W",
  "X",
  "Y",
  "Z",
];

const _exportExcel = () => {
  exportExcel(`单船研究数据`, `单船研究数据`, 8, (worksheet) => {
    let i = 2;
    const heads = [
      "工序",
      "电量(KWH)",
      "柴油(L)",
      "天然气(m³)",
      "CO2(m³)",
      "O2(m³)",
      "压缩空气量(m³)",
      "车间",
    ];
    heads.forEach((head, index) => {
      const cell = worksheet.getCell(`${wordIndex[index]}${i}`);
      cell.value = head;
      cell.fill = {
        type: "pattern",
        pattern: "solid",
        fgColor: { argb: "c0c0c0" }, // 设置背景色
      };
      setCellStyle(cell);
    });

    _.each(state.source, (list, group) => {
      _.each(list, (column, index) => {
        i++;
        const cellA = worksheet.getCell(`A${i}`);
        cellA.value = column.flow;
        setCellStyle(cellA);

        const cellB = worksheet.getCell(`B${i}`);
        cellB.value = column.power;
        setCellStyle(cellB);

        const cellC = worksheet.getCell(`C${i}`);
        cellC.value = column.oil;
        setCellStyle(cellC);

        const cellD = worksheet.getCell(`D${i}`);
        cellD.value = column.gas;
        setCellStyle(cellD);

        const cellE = worksheet.getCell(`E${i}`);
        cellE.value = column.co2;
        setCellStyle(cellE);

        const cellF = worksheet.getCell(`F${i}`);
        cellF.value = column.o2;
        setCellStyle(cellF);

        const cellG = worksheet.getCell(`G${i}`);
        cellG.value = column.air;
        setCellStyle(cellG);

        if (index === 0) {
          const cellH = worksheet.getCell(`H${i}`);
          worksheet.mergeCells(`H${i}:H${i + list.length - 1}`);
          cellH.value = group;
          setCellStyle(cellH);
        }
      });
    });
  });
};

defineExpose({ exportExcel: _exportExcel });
</script>
<style lang="less" scoped>
.iBox {
  width: 100%;
  height: 100%;

  table {
    width: 100%;
    border: 1px solid #f8f8f8;
  }

  th,
  td {
    text-align: center;
    border: 1px solid #f8f8f8;
    padding: 4px;
  }
}
</style>
